<template>
  <div id="app">
    <!-- 头部logo -->
    <div class="head">
      <img src="@/assets/imgs/华建通logo.png" alt="">
    </div>

    <!-- 展示图 -->
    <div class="ad" />

    <!-- 轮播图 -->
    <div class="rotation">
      <div class="btnLeft" @click="leftFn">
        <img src="@/assets/imgs/切换按钮-左-1.png" alt="">
      </div>
      <div class="rotationCard">
        <div class="rotationCardCard-b">
          <div class="rotation-img">
            <img src="@/assets/imgs/播放按钮.png" alt="">
          </div>
          <div class="rotation-img">
            <img src="@/assets/imgs/播放按钮.png" alt="">
          </div>
          <div class="rotation-img">
            <img src="@/assets/imgs/播放按钮.png" alt="">
          </div>
        </div>
      </div>
      <div class="btnRight" @click="rightFn">
        <img src="@/assets/imgs/切换按钮-右-2.png" alt="">
      </div>
    </div>

    <!-- 合作采购方 -->
    <title-bar :data="{title: '合作采购方',urlImg: '标题英文-合作采购方.png', urlIcon: '图标-标题-合作采购方.png'}" />
    <div class="hzcgf">
      <hzcgf-card v-for="(item, i) in hzcgfList" :key="i" :data="item" />
    </div>

    <!-- 热门项目 -->
    <title-bar :data="{title: '热门项目',urlImg: '标题英文-热门项目.png', urlIcon: '图标-标题-热门项目.png'}"  />
    <div class="rmxmMain">
      <div class="cardList">
        <div class="rmxmCard">
          <div class="bigTit">德基南京世界贸易中心</div>
          <div class="smallTit"><img src="@/assets/imgs/图标-热门项目-地址.png" alt=""><span>江苏南京/德基集团</span></div>
        </div>
        <div class="rmxmCard" style="margin-left: 0.1rem;">
          <div class="alive bigTit">爱情城项目</div>
          <div class="smallTit"><img src="@/assets/imgs/图标-热门项目-地址.png" alt=""><span>河北保定/长城实业</span></div>
        </div>
        <div class="rmxmCard mrt-10">
          <div class="bigTit">德基南京世界贸易中心</div>
          <div class="smallTit"><img src="@/assets/imgs/图标-热门项目-地址.png" alt=""><span>江苏南京/德基集团</span></div>
        </div>
        <div class="rmxmCard mrl-10 mrt-10">
          <div class="bigTit">德基南京世界贸易中心</div>
          <div class="smallTit"><img src="@/assets/imgs/图标-热门项目-地址.png" alt=""><span>江苏南京/德基集团</span></div>
        </div>
      </div>
      <div class="rmxmBtn">
        <span>查看更多</span><i />
      </div>
    </div>
    <div style="background-color: #fff; width: 100%; height: 0.3rem;"></div>

    <!-- 招募需求 -->
    <title-bar :data=" {title: '招募需求',urlImg: '标题英文-招募需求.png', urlIcon: '图标-标题-招募需求.png', bgGray: true}" />
    <div class="zmxqMain">
      <zmxq-card :zmxqlist="zmxqList" />
      <zmxq-card class="mlt-20" :zmxqlist="zmxqList1" />
      <zmxq-card class="mlt-20" :zmxqlist="zmxqList2" />
      <zmxq-card class="mlt-20" :zmxqlist="zmxqList3" />
    </div>
    <!-- 热门品类 -->
    <title-bar :data=" {title: '热门品类',urlImg: '标题英文-热门品类.png', urlIcon: '图标-标题-热门项目.png'}" />
    <div class="rmplMain">
      <rmpl-card :rmpldata="rmplList" />
      <rmpl-card class="mlt-20" :rmpldata="rmplList1" />
    </div>
    <!-- 优质供应商 -->
    <title-bar :data=" {title: '优质供应商',urlImg: '标题英文-优质供应商.png', urlIcon: '图标-标题-优质供应商.png'}" />
    <div class="yzgysMain">
      <div class="left-btn"></div>
      <div class="yzgys-card">
        <div class="yzgys-img">
          <img src="@/assets/imgs/优质供应商-1.png" alt="">
        </div>
        <div class="company">
          恒飞电缆股份有限公司
        </div>
        <div class="money">
          <i class="money-logo"></i>
          <span>7.56亿人民币</span>
        </div>
        <div class="introduce">
          <div class="introduce-logo">
            <img src="@/assets/imgs/图标-优质供应商-介绍.png" alt="">
          </div>
          <div class="introduce-con">
            <p>消防工程/智能家居/智能化集成/消防...</p>
          </div>
        </div>
      </div>
      <div class="yzgys-card">
        <div class="yzgys-img">
          <img src="@/assets/imgs/优质供应商-2.png" alt="">
        </div>
        <div class="company">
          兴辉瓷砖股份有限公司
        </div>
        <div class="money">
          <i class="money-logo"></i><span>7.56亿人民币</span>
        </div>
        <div class="introduce">
          <div class="introduce-logo">
            <img src="@/assets/imgs/图标-优质供应商-介绍.png" alt="">
          </div>
          <div class="introduce-con">
            <p>消防工程/智能家居/智能化集成/消防...</p>
          </div>
        </div>
      </div>
      <div class="right-btn"></div>
    </div>

    <!-- 活动形式 -->
    <title-bar :data=" {title: '活动形式',urlImg: '标题英文-活动形式.png', urlIcon: '图标-标题-活动形式.png'}" />
    <div class="hdxsMain">
      <div class="xszmCard">
        <div class="xszm-title">线上招募</div>
        <div class="xszm-con">线上定向加入 海量数据沉淀</div>
        <div class="xszm-btn">我要参加</div>
      </div>

      <div class="xszmCard xszmBg mlt-20">
        <div class="xszm-title changeColor">供需对接会</div>
        <div class="xszm-con">线下供需直连 精准高效共赢</div>
        <div class="xszm-btn changeBtn">我要参加</div>
      </div>
    </div>

      <div class="tel">
        <img src="@/assets/imgs/电话信息.png" alt="">
      </div>

      <div class="ljbm-card">
        <div class="ljbm-btn">我要报名</div>
      </div>

      <div class="footer">
        <div class="footer-logo" />
        <div class="lxdh">
          <div class="label">南宁总部:</div>
          <div class="mrl-10">
            <p>中国广西南宁市良庆区秋月路18号,</p>
            <p>530200</p>
          </div>
        </div>
        <div class="lxdh">
          <div class="label">北京总部:</div>
          <div class="mrl-10">
            <p>北京市海淀区鲁迅文化园文化创作展示中心2号楼,</p>
            <p>100097</p>
          </div>
        </div>
        <div class="lxdh">
          <div class="label">联系电话:</div>
          <div class="mrl-10">
            <p>0771-2500111</p>
          </div>
        </div>
        <div class="lxdh">
          <div class="label">联系邮箱:</div>
          <div class="mrl-10">
            <p>contact@caih.com</p>
          </div>
        </div>
        <div class="bah">
          <p>桂ICP备16005301号-7</p>
          <p><i class="police"></i>桂公网安备 45010802000099号</p>
          <p>由广西东信数建信息科技有限公司承建</p>
          <p>Copyright 2020-2024 All Right</p>
        </div>
      </div>
  </div>
</template>

<script>
import titleBar from '@/components/titleBar.vue';
import hzcgfCard from '@/components/hzcgfCard.vue';
import zmxqCard from '@/components/zmxqCard.vue';
import rmplCard from '@/components/rmplCard.vue';
export default {
  name: 'App',
  components: {
    titleBar,
    hzcgfCard,
    zmxqCard,
    rmplCard
  },
  data() {
    return {
      index: 0,
      time: null,
      imgs: null,
      rmplList: [
        { title: '入户门', num: 19 },
        { title: '铝合金门窗', num: 19 },
        { title: '精装修工程', num: 19 },
        { title: '大理石', num: 19 },
        { title: '洁具', num: 19 },
      ],
      rmplList1: [
        { title: '消防工程', num: 19 },
        { title: '园林景观工程', num: 19 },
        { title: '充电桩', num: 19 },
        { title: '泛光照明工程', num: 19 },
        { title: '标识识别牌系统工程', num: 19 },
      ],
      hzcgfList: [
        { urlImg: '合作采购方-1.png' },
        { urlImg: '合作采购方-2.png' },
        { urlImg: '合作采购方-3.png' },
        { urlImg: '合作采购方-4.png' },
        { urlImg: '合作采购方-5.png' },
      ],
      zmxqList: {
        urlImg: '合作采购方-1.png',
        title: '作为中国领先的城市运营商，云星集团主营业务涉及房地产开发、商业运营...',
        list: [
          { id: 1, content: '软装设计' },
          { id: 2, content: '方案设计' },
          { id: 3, content: '精装修设计' },
          { id: 4, content: '景观设计' },
          { id: 5, content: '标识标牌系工程' },
          { id: 6, content: '地坪地面工程' },
          { id: 7, content: '泛光照明工程' },
          { id: 8, content: '发电机组' },
          { id: 9, content: '铝合金门窗' },
          { id: 10, content: '地坪地面工程' },
          { id: 11, content: '泛光照明工程' },
          { id: 12, content: '发电机组' },
          { id: 13, content: '铝合金门窗' },
          { id: 14, content: '地坪地面工程' },
        ]
      },
      zmxqList2: {
        urlImg: '优质供应商-3.png',
        title: '作为中国领先的城市运营商，云星集团主营业务涉及房地产开发、商业运营...',
        list: [
          { id: 1, content: '软装设计' },
          { id: 2, content: '方案设计' },
          { id: 3, content: '精装修设计' },
          { id: 4, content: '景观设计' },
          { id: 5, content: '标识标牌系工程' },
          { id: 6, content: '地坪地面工程' },
          { id: 7, content: '泛光照明工程' },
          { id: 8, content: '发电机组' },
          { id: 9, content: '铝合金门窗' },
          { id: 10, content: '地坪地面工程' },
          { id: 11, content: '泛光照明工程' },
          { id: 12, content: '发电机组' },
          { id: 13, content: '铝合金门窗' },
          { id: 14, content: '地坪地面工程' },
        ]
      },
      zmxqList1: {
        urlImg: '优质供应商-1.png',
        title: '作为中国领先的城市运营商，云星集团主营业务涉及房地产开发、商业运营...',
        list: [
          { id: 1, content: '软装设计' },
          { id: 2, content: '方案设计' },
          { id: 3, content: '精装修设计' },
          { id: 4, content: '景观设计' },
          { id: 5, content: '标识标牌系工程' },
          { id: 6, content: '地坪地面工程' },
          { id: 7, content: '泛光照明工程' },
          { id: 8, content: '发电机组' },
          { id: 9, content: '铝合金门窗' },
          { id: 10, content: '地坪地面工程' },
          { id: 11, content: '泛光照明工程' },
          { id: 12, content: '发电机组' },
          { id: 13, content: '铝合金门窗' },
          { id: 14, content: '地坪地面工程' },
        ]
      },
      zmxqList3: {
        urlImg: '优质供应商-4.png',
        title: '作为中国领先的城市运营商，云星集团主营业务涉及房地产开发、商业运营...',
        list: [
          { id: 1, content: '软装设计' },
          { id: 2, content: '方案设计' },
          { id: 3, content: '精装修设计' },
          { id: 4, content: '景观设计' },
          { id: 5, content: '标识标牌系工程' },
          { id: 6, content: '地坪地面工程' },
          { id: 7, content: '泛光照明工程' },
          { id: 8, content: '发电机组' },
          { id: 9, content: '铝合金门窗' },
          { id: 10, content: '地坪地面工程' },
          { id: 11, content: '泛光照明工程' },
          { id: 12, content: '发电机组' },
          { id: 13, content: '铝合金门窗' },
          { id: 14, content: '地坪地面工程' },
        ]
      }
    }
  },
  methods: {
    position() {
      let imgsBox = document.querySelector('.rotationCardCard-b');
      imgsBox.style.left = `-${this.index * 5.3}rem`;
    },
    add() {
      this.index >= this.imgs.length - 1 ? this.index = 0 : this.index++;
    },
    desc() {
      this.index < 1 ? this.index = this.imgs.length -1 : this.index--;
    },

    timer(){
      this.time = setInterval(()=> {
        this.index++;
        this.desc();
        this.add();
        this.position();
      }, 3000);
    },
    leftFn() {
      this.desc();
      this.position();
      clearInterval(this.time);
      this.timer();
    },
    rightFn() {
      this.add();
      this.position();
      clearInterval(this.time);
      this.timer();
    }

  },
  mounted() {
    this.imgs = document.querySelectorAll('.rotation-img');
    this.timer();
  },
}
</script>

<style lang="less">
  .mrt-10{
    margin-top: 0.1rem;
  }
  .mrl-10{
    margin-left: 0.1rem;
  }
  .mlt-20{
    margin-top: 0.2rem;
  }
  .head{
    width: 7.5rem;
    height: 0.93rem;
    display: flex;
    align-items: center;
    img{
      width: 3.75rem;
    }
  }
  .ad {
    width: 7.5rem;
    height: 4rem;
    background: url(@/assets/imgs/05-710x460.png);
    background-repeat: no-repeat;
    background-size: cover;
  }
  .rotation{
    width: 7.5rem;
    height: 3.98rem;
    background-color: rgba(184, 218, 255, 0.1);
    display: flex;
    .btnLeft{
      width: 1.1rem;
      height: 100%;
      img{
        width: 0.4rem;
        height: 0.4rem;
        margin-top: 1.9rem;
        margin-left: 0.22rem;
      }
    }
    .rotationCard{
      width: 5.3rem;
      height: 3.28rem;
      display: flex;
      margin-top: 0.35rem;
      overflow-x: hidden;
      position: relative;
      .rotationCardCard-b{
        width: 300%;
        height: 3.28rem;
        display: flex;
        position: absolute;
        transition: .5s;

        .rotation-img{
          width: 100%;
          height: 100%;
          background: url(@/assets/imgs/05-710x460.png);
          background-size: cover;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 0.1rem;
          img {
            width: 0.81rem;
            height: 0.81rem;

          }
        }
      }
    }
    .btnRight{
      flex: 1;
      height: 100%;
      display: flex;
      img{
        width: 0.4rem;
        height: 0.4rem;
        margin-top: 1.9rem;
        margin-left: 0.48rem;
      }
    }
  }
    .hzcgf{
      width: 7.5rem;
      height: 2.55rem;
      background-color: #F7F7F7;
      padding: 0.1rem 0.12rem 0.25rem;
      display: flex;
      flex-wrap: wrap;
    }
    .rmxmMain{
      width: 7.5rem;
      height: 3.23rem;
      background-color: #F7F7F7;
      padding: 0.2rem 0.22rem 0.25rem;
      .cardList{
        display: flex;
        flex-wrap: wrap;
      }
      .rmxmCard{
        width: 3.48rem;
        height: 0.94rem;
        background-color: #fff;
        padding-left: 0.2rem;
        padding-top: 0.15rem;
        .bigTit{
            color: #333333;
            font-size: 0.24rem;
            font-weight: bold;
        }
        .alive{
          color:#F07842;
        }
        .smallTit{
            font-size: 0.2rem;
            color: #999999;
            line-height: 0.4rem;
            img{
                margin-right: 0.06rem;
                width: 0.2rem;
                height: 0.2rem;
            }
        }
      }
      .rmxmBtn{
        width: 7.06rem;
        height: 0.6rem;
        margin-top: 0.2rem;
        text-align: center;
        line-height: 0.6rem;
        background-image: linear-gradient(180deg, rgba(57,149,192,0.00) 1%, rgba(57, 149, 192, 0.16) 100%);
        span{
          font-size: 0.2rem;
          color: #3995C0;
        }
        i{
          display: inline-block;
          background: url(@/assets/imgs/图标-展开.png);
          background-size: cover;
          width: 0.15rem;
          height: 0.1rem;
          margin-left: 0.065rem;
        }
      }
    }

    
      .zmxqMain{
        width: 7.5rem;
        height: 20.66rem;
        background: #F7F7F7;
        padding: 0.2rem 0.22rem 0.25rem;
      }
      .rmplMain{
        width: 7.5rem;
        height: 7.58rem;
        padding: 0.25rem 0.22rem;
        background-color: #F7F7F7;
      }
      .yzgysMain{
        width: 7.5rem;
        height: 3.43rem;
        padding: 0.25rem 0.22rem 0.28rem;
        background: #F7F7F7;
        display: flex;
        align-items: center;
        justify-content: space-between;
      .left-btn{
        width: 0.4rem;
        height: 0.4rem;
        background: url(@/assets/imgs/切换按钮-左-1.png) no-repeat;
        background-size: contain;
      }
      .yzgys-card{
        width: 2.8rem;
        height: 2.9rem;
        background-color: #fff;
        .yzgys-img{
          width: 100%;
          height: 0.96rem;
          img{
            height: 0.96rem;
          }
        }
        .company{
          width: 2.4rem;
          height: 0.3rem;
          font-size: 0.24rem;
          font-weight: bold;
          color: #333333;
          margin: 0 auto;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        .money{
          font-size: 0.2rem;
          color: #999999;
          line-height: 28px;
          margin-top: 0.1rem;
          margin-left: 0.17rem;
          .money-logo{
            background: url(@/assets/imgs/图标-优质供应商-金额.png);
            width: 0.2rem;
            height: 0.2rem;
            margin-right: 0.07rem;
            background-size: contain;
            display: inline-block;
          }
        }
        .introduce{
          display: flex;
          .introduce-logo{
            margin-left: 0.17rem;
            margin-top: 0.1rem;
            margin-right: 0.07rem;
            img{
              width: 0.2rem;
              height: 0.2rem;
            }
          }
          .introduce-con{
            margin-top: 0.1rem;
            width: 2.27rem;
            height: 1rem;
            font-size: 0.2rem;
            color: #999999;
            text-align: justify;
            line-height: 0.3rem;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: pre-wrap;
          }
        }
      }
      .right-btn{
        width: 0.4rem;
        height: 0.4rem;
        background: url(@/assets/imgs/切换按钮-右-2.png) no-repeat;
        background-size: contain;
      }
      }

      .hdxsMain{
        width: 7.5rem;
        padding: 0.25rem 0.8rem 0.715rem;
        background: #F7F7F7;
        .xszmCard{
          width: 5.9rem;
          height: 2.4rem;
          background: url(@/assets/imgs/模块-活动形式-线上招募.png) no-repeat;
          background-size: contain;
          padding: 0.35rem 0 0 0.38rem;
          .xszm-title{
            font-size: 0.4rem;
            font-weight: bold;
            color: #6D5232;
          }
          .changeColor{
            color: #3995C0;
          }
          .xszm-con{
            margin-top: 0.1rem;
            font-size: 0.22rem;
            color: #333333;
            line-height: 0.3rem;
          }
          .xszm-btn{
            width: 1.36rem;
            height: 0.5rem;
            margin-top: 0.15rem;
            background-image: linear-gradient(90deg, #FF7549 0%, #EBB75F 100%);
            border-radius: 0.25rem;
            text-align: center;
            font-size: 0.2rem;
            font-weight: bold;
            line-height: 0.5rem;
            color: #FFFFFF;
          }
          .changeBtn{
            background-image: linear-gradient(90deg, #3793C0 0%, #57DCF0 100%);
          }
        }
        .xszmBg{
          background: url(@/assets/imgs/模块-活动形式-供需对接会.png) no-repeat;
          background-size: contain;
          padding: 0.35rem 0 0 0.38rem;
          width: 5.9rem;
          height: 2.4rem;
        }
      }
      .tel{
        width: 7.5rem;
        height: 0.6rem;
        background: #F7F7F7;
        display: flex;
        img{
          width: 7.06rem;
          height: 0.6rem;
          margin: 0 auto;
        }
      }
      .ljbm-card{
        width: 7.5rem;
        height: 2.1rem;
        background: url(@/assets/imgs/花花草草.png) no-repeat;
        background-size: contain;
        background-color: #F7F7F7;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .ljbm-btn{
        width: 1.63rem;
        height: 0.6rem;
        background-image: linear-gradient(90deg, #3793C0 0%, #57DCF0 100%);
        border-radius: 0.03rem;
        border-radius: 0.03rem;
        font-size: 0.24rem;
        font-weight: bold;
        line-height: 0.6rem;
        color: #FFFFFF;
        text-align: center;
      }
      .footer{
        width: 7.5rem;
        height: 10rem;
        padding-top: 0.49rem;
        padding-left: 0.42rem;
        background: #323232;
        font-size: 0.24rem;
        color: rgba(255,255,255,0.65);
        line-height: 0.4rem;
        .lxdh{
          margin-top: 0.5rem;
          display: flex;
        }
        .footer-logo{
            width: 3.9rem;
            height: 0.81rem;
            background: url(@/assets/imgs/底部logo-中国东信.png) no-repeat;
            background-size: contain;
        }
        .bah{
          margin-top: 1.16rem;
          text-align: center;
          line-height: 0.7rem;
          position: relative;
          .police {
            background: url(@/assets/imgs/ico_ga.png) no-repeat;
            background-size: contain;
            width: 0.4rem;
            height: 0.4rem;
            position: absolute;
            left: 1.35rem;
            top: 0.85rem;
          }
        }
      }
</style>
